<template>
<el-card style="width: 600px">
  <el-tabs v-model="activeName" >
    <el-tab-pane label="修改登录密码" name="first">
      <el-form  style="max-width: 600px">
        <el-form-item label="原始密码" style="margin-left: 45px">
          <el-input type="password" v-model="password.oldPwd" placeholder="请输入原始密码" style="width: 300px;"/>
        </el-form-item>
        <el-form-item label="新密码" style="margin-left: 58px">
          <el-input type="password" v-model="password.newPwd" placeholder="请输入新密码" style="width: 300px;"/>
        </el-form-item>
        <el-form-item label="请重新输入" style="margin-left: 29px">
          <el-input type="password" v-model="password.newPwdAgain" placeholder="请重写输入新密码" style="width: 300px;"/>
        </el-form-item>
        <el-form-item >
          <el-button type="primary"  style="margin-left: 110px" @click="updatePassword">修改密码</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="修改支付密码" name="second">
      <el-form  style="max-width: 600px">
        <el-form-item label="原始支付密码" style="margin-left: 17px">
          <el-input type="password" v-model="payPwd.oldPayPwd" placeholder="初始支付密码：123" style="width: 300px;"/>
        </el-form-item>
        <el-form-item label="新密码" style="margin-left: 58px">
          <el-input type="password" v-model="payPwd.newPayPwd" placeholder="请输入新密码" style="width: 300px;"/>
        </el-form-item>
        <el-form-item label="请重新输入" style="margin-left: 29px">
          <el-input type="password" v-model="payPwd.newPayPwdAgain" placeholder="请重写输入新密码" style="width: 300px;"/>
        </el-form-item>
        <el-form-item >
          <el-button type="primary"  style="margin-left: 110px" @click="updatePayPassword">修改密码</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>
  </el-tabs>
</el-card>
</template>

<script setup>
import {ref} from "vue";
import userApi from "@/api/userApi.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";
import {useTokenStore} from "@/stores/token.js";
import {useUserStore} from "@/stores/user.js";

const userStore = useUserStore()
const tokenStore = useTokenStore();
const activeName = ref('first')
//登陆密码
const password = ref({
  oldPwd:null,
  newPwd:null,
  newPwdAgain:null
})
//支付密码
const payPwd = ref({
  oldPayPwd:null,
  newPayPwd:null,
  newPayPwdAgain:null
})

//修改登陆密码
function updatePassword(){
  userApi.updatePassword(password.value)
      .then(resp => {
        if(resp.code == 10000){
          ElMessage.success({
            message: resp.msg,
            duration: 1000,
            onClose: () => {
              //重置token并退出重新登陆
              tokenStore.$reset();
              userStore.$reset();
              //跳转到管理员登录页
              router.push("/user/login");
            }
          })
        }else {
          ElMessage.error(resp.msg);
        }
      })
}
//修改支付密码
function updatePayPassword(){
  userApi.updatePayPassword(payPwd.value)
      .then(resp => {
        if(resp.code == 10000){
          ElMessage.success(resp.msg);
          payPwd.value = {
            oldPayPwd:null,
            newPayPwd:null,
            newPayPwdAgain:null
          }
        }else {
          ElMessage.error(resp.msg);
        }
      })
}

</script>

<style scoped>

</style>